<template>
  <transition name="fade">
    <div class="container" v-on:click.prevent.stop="closeToast" v-if="isShow">
      <div class="wrapper">
        <div><img v-lazy="{src:showModalMask,loading:lazyPic}"></div>
        <div class="coupon">
          恭喜你
          <p>获得{{this.data.couponVal}}元立减券</p>
        </div>
        <p class="text">现在下单立享优惠</p>
        <div class="closeToast" @click="closeToast">&times;</div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props:['data'],
  data() {
    return {
      isShow: false,
      lazyPic:require('../../../assets/img/publicImg/loading_default.png') ,
      modalPic:{
        fileName01:require('../../../assets/img/streetDance/streetDance17.gif'),
      },
      showModalMask: null
    };
  },
  created() {
    this.showMask();
  },
  methods: {
    closeToast() {
      this.isShow = false;
      this.$emit("closeModal");
    },
    showMask() {
      let modalName=this.data.modalType;
      this.showModalMask=this.modalPic.fileName01;
      this.isShow = true;
    }
  }
};
</script>
<style lang='less' scoped>
.container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.5);
  .wrapper {
    width: 3.6rem;
    height: 5.7rem;
    padding: 0.5rem;
    margin: 2rem auto 0rem;
    color: #fff;
    text-align: center;
    font-size: 0.32rem;
    position: relative;
    border-radius: 0.1rem;
    background: #113E77;
    .coupon{
      margin-top: 0.25rem;
      font-size: 0.46rem;
      line-height: 0.6rem;
      background: #CB3366;
    }
    .text{
      font-weight: 600;
      padding-top: 0.2rem;
    }
    .closeToast {
      width: 0.8rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      margin-left: -0.5rem;
      border-radius: 50%;
      color: #fff;
      font-size: 0.5rem;
      position: absolute;
      top: -0.12rem;
      right: -0.12rem;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>